<template>
	
	<h3>通知公告列表</h3>
	<el-divider />
	<el-row>
	    <el-col :span="2">公告标题：</el-col>
	    <el-col :span="5">
           <el-input
                 v-model="input3"
                 class="w-50 m-2"
                 size="small"
                 placeholder="Please Input"
               />
		</el-col>
		<el-col :span="2">公告类型：</el-col>
		<el-col :span="4"><el-input
                 v-model="input3"
                 class="w-50 m-2"
                 size="small"
                 placeholder="Please Input"
               /></el-col>
			   <el-col :span="2">发布时间：</el-col>
			   <el-col :span="4"><el-input
			            v-model="input3"
			            class="w-50 m-2"
			            size="small"
			            placeholder="Please Input"
			          /></el-col>
				<el-col :span="5"><el-button type="primary" @click="noticesDelete">查询</el-button></el-col>
	
	  </el-row>
	<el-divider />
	<el-row>
		<el-col :span="2"><el-button type="primary" plain @click="noticesDelete">批量删除</el-button></el-col>
	     <el-col :span="22"></el-col>
	</el-row>
	<el-divider />
	<el-table :data="subinbox" 
	          :default-sort="{ prop: 'time', order: 'ascending' }" 
			  stripe 
			  border 
			  @selection-change="handleSelectionChange"
			  style="width: 100%">
		<el-table-column type="selection" width="50" />
	    <el-table-column prop="nocName" label="公告标题" width="300" />
	    <el-table-column prop="nocType" label="公告类型" width="200" />
	    <el-table-column prop="nocTime" label="发布时间" width="500"/>
		<el-table-column label="操作">
		      <template #default="scope">
		        <el-button plain size="small" type="primary" @click="lookNotice(scope.row)">查看</el-button>
	
		      </template>
		</el-table-column>
		
		
		
	  </el-table>
          
         <el-dialog v-model="updateNoticeFormVisible"  title="修改通知公告">
		   <el-form :model="form">
		     <el-form-item label="公告标题" :label-width="formLabelWidth">
		       <el-input v-model="updateNotice.nocName" autocomplete="off" />
		     </el-form-item>
		     <el-form-item label="公告类型" :label-width="formLabelWidth">
		       <el-select v-model="updateNotice.nocType" placeholder="Please select a zone">
		         <el-option label="规章制度" value="规章制度"></el-option>
		         <el-option label="节假日" value="节假日"></el-option>
		         <el-option label="人事调动" value="人事调动"></el-option>
		       </el-select>
		     </el-form-item>
					<el-form-item label="公告正文" :label-width="formLabelWidth">
					  <el-input type="textarea" rows=12 v-model="updateNotice.nocContent"></el-input>
					  
					</el-form-item>
		   </el-form>
		   <template #footer>
		     <span class="dialog-footer">
		       <el-button @click="updateNoticeFormVisible = false">取消</el-button>
		       <el-button type="primary" @click="savenoticeUpdate"
		         >完成</el-button
		       >
		     </span>
		   </template>
		 </el-dialog>
		 
		 <el-dialog v-model="INoticeFormVisible"  title="通知公告详情">
		   <el-form :model="form">
		     <el-form-item label="公告标题" :label-width="formLabelWidth">
		       <el-input v-model="updateNotice.nocName" disabled autocomplete="off" />
		     </el-form-item>
		     <el-form-item label="公告类型" :label-width="formLabelWidth">
		       <el-input v-model="updateNotice.nocType" disabled autocomplete="off" />
		     </el-form-item>
		 					<el-form-item label="公告正文" :label-width="formLabelWidth">
		 					  <el-input type="textarea" disabled rows=12 v-model="updateNotice.nocContent"></el-input>
		 					  
		 					</el-form-item>
		   </el-form>
		   <template #footer>
		     <span class="dialog-footer">
		       <el-button type="primary" @click="INoticeFormVisible = false"
		         >完成</el-button
		       >
		     </span>
		   </template>
		   </el-dialog>
		  
<el-row>
	<el-col :span="10"></el-col>
	<el-col :span="14">
	  <el-pagination 
	  background layout="prev, pager, next" 
	  :page-size="pageSize" 
	  :total="inbox.length" 
	  @current-change="doPaging"
	  />
	</el-col>
</el-row>
 
 

</template>

<script>
	import { ElMessage } from 'element-plus'
	import qs from 'qs'
    export default {
		data(){
			return {
				news:[],
				inbox:[],
				subinbox:[],
				noticesidArr:[],
				pageSize:8,
				updateNoticeFormVisible:false,
				contacter:[],
				draft:[],
				updateNotice:{},
				INoticeFormVisible:false
			}
		},
		methods: {
			   //多选框
				handleSelectionChange(arr){
					this.noticesidArr=arr
				},
				//批量删除
				
				noticesDelete(){
					let notices=[]
					for(let i=0;i<this.noticesidArr.length;i++)
					{
						console.log(this.noticesidArr[i].id)
						notices.push(this.noticesidArr[i].id)
					}
					let that=this
					this.$axios.get("http://localhost:8080/notice/noticedeletes?notices="+notices).then(function(res){
						if(res.data==true)
						{
							ElMessage({
							    message: '批量删除成功！',
							    type: 'success',
							  })
							  that.noticeList()
							  
						}
						else{
							ElMessage.error('删除失败！')
						}
						
					})
				},
			
			saveDelete(nid){
				let that=this
				this.$axios.get("http://localhost:8080/notice/noticedelete",{
					params:{
						nocId:nid
					}
				}).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '删除成功！',
						    type: 'success',
						  })
						  that.noticeList()
						  
					}
					else{
						ElMessage.error('删除失败！')
					}
					
				})
			},
			//显示数据库内容
			noticeList(){
				let that=this
				this.$axios.get("http://localhost:8080/notice/noticelist").then(function(res){
						that.inbox=res.data
						//默认第一页
						that.subinbox=that.inbox.slice(0,that.pageSize)
					})
			},
			
			//分页
			doPaging(curr){
				//根据当前页 推算显示第几到第几行数据
				let start=(curr-1)*this.pageSize
				let end=curr*this.pageSize
				this.subinbox=this.inbox.slice(start,end)
				
			},
			close(){
			    this.updateNoticeFormVisible=false
			    this.noticeList()	
			},
			savenoticeUpdate(){
				if(this.updateNotice.nocName==null||this.updateNotice.nocName=="")
				{
					ElMessage.error('请填写标题！')
				}
				else if(this.updateNotice.nocContent==null||this.updateNotice.nocContent=="")
				{
					ElMessage.error('请输入公告正文！')
				}
				else{
				this.updateNotice.nocTime="2022-03-02 15:00:00"
				let that=this
				let str=qs.stringify(that.updateNotice)
				this.$axios.get("http://localhost:8080/notice/noticeupdate?"+str).then(function(res){
					if(res.data==true)
					{
						ElMessage({
						    message: '修改成功！',
						    type: 'success',
						  })
						  that.updateNoticeFormVisible=false
						  that.noticeList()
						  
					}
					else{
						ElMessage.error('修改失败！')
					}
					})
					}
			},
			openUpdate(row){
				this.updateNotice=row
				this.updateNoticeFormVisible=true
				
			},
			lookNotice(row){
				this.updateNotice=row
				this.INoticeFormVisible=true
			}
			
			
			
			
			
			
		},
		created(){
			this.noticeList()

		}
		
	}

</script>

<style>
	h3 {
		text-align: left;
		margin-top:0px;
		
	}
	
	
</style>